<template>
  <div class="app-container">
    <ContentWrap :style="getBoxHeight">
      <div style="display: flex;justify-content: center;">
        <el-descriptions title="基础参数设置" border :column="1" style="width: 32%;">
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleBasicParamsEdit">编辑</el-button>
          </template>

          <el-descriptions-item label="综合水价(元)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('waterPrice')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="综合成本(元)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('cost')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="夜间时间段" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('night')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="单个漏点水量估计(立方米/小时)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('ddlsl')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="单个漏点探漏成本预估(元)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('ddtlCost')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="单个漏点耗材成本预估(元)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('ddhcCost')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="单个漏点人工开挖成本预估(元)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('ddrgCost')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="DN75(含)以上管道长度(公里)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('pipeLength')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="单位供水管长(公里)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('pipeLengthunit')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="年平均出厂压力(MPa)" :labelStyle="customLabelStyle">
            {{
              getBasicParamsValue('pressureYear')
            }}
          </el-descriptions-item>
          <el-descriptions-item label="报警数据提示" :labelStyle="customLabelStyle">
            {{
              ['只记录报警，不弹窗', '弹窗提示报警',][getBasicParamsValue('warning')]
            }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </ContentWrap>

    <!-- 添加或修改基础参数对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="560px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="220px">
        <el-form-item label="综合水价(元)" prop="waterPrice">
          <el-input v-model="form.waterPrice" placeholder="请输入综合水价"/>
        </el-form-item>
        <el-form-item label="综合成本(元)" prop="cost">
          <el-input v-model="form.cost" placeholder="请输入综合成本"/>
        </el-form-item>
        <el-form-item label="夜间时间段" prop="night">
          <el-time-picker is-range v-model="form.night" range-separator="至" style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="单个漏点水量估计(立方米/小时)" prop="ddlsl">
          <el-input v-model="form.ddlsl" placeholder="请输入单个漏点水量估计"/>
        </el-form-item>
        <el-form-item label="单个漏点探漏成本预估(元)" prop="ddtlCost">
          <el-input v-model="form.ddtlCost" placeholder="请输入单个漏点探漏成本预估"/>
        </el-form-item>
        <el-form-item label="单个漏点耗材成本预估(元)" prop="ddhcCost">
          <el-input v-model="form.ddhcCost" placeholder="请输入单个漏点耗材成本预估"/>
        </el-form-item>
        <el-form-item label="单个漏点人工开挖成本预估(元)" prop="ddrgCost">
          <el-input v-model="form.ddrgCost" placeholder="请输入单个漏点人工开挖成本预估"/>
        </el-form-item>
        <el-form-item label="DN75(含)以上管道长度(公里)" prop="pipeLength">
          <el-input v-model="form.pipeLength" placeholder="请输入DN75(含)以上管道长度"/>
        </el-form-item>
        <el-form-item label="单位供水量管长(公里)" prop="pipeLengthunit">
          <el-input v-model="form.pipeLengthunit" placeholder="请输入单位供水量管长"/>
        </el-form-item>
        <el-form-item label="年平均出厂压力(MPa)" prop="pressureYear">
          <el-input v-model="form.pressureYear" placeholder="请输入年平均出厂压力"/>
        </el-form-item>
        <el-form-item label="报警数据提示" prop="warning">
          <el-radio-group v-model="form.warning">
            <el-radio label="1">弹窗提示报警</el-radio>
            <el-radio label="0">只记录报警，不弹窗</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCurrentBasicParams, updateBasicParams} from "@/api/leakage/basicParams";
import {parseTime} from '@/utils/ruoyi'

export default {
  name: "BasicParams",
  data() {
    return {
      screenHeight: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        waterPrice: [
          {required: true, message: "请输入综合水价", trigger: "blur"}
        ],
        cost: [
          {required: true, message: "请输入综合成本", trigger: "blur"}
        ],
        night: [
          {required: true, message: "请输入夜间时间段", trigger: "blur"}
        ],
        ddlsl: [
          {required: true, message: "请输入单个漏点水量估计", trigger: "blur"}
        ],
        ddtlCost: [
          {required: true, message: "请输入单个漏点探漏成本预估", trigger: "blur"}
        ],
        ddhcCost: [
          {required: true, message: "请输入单个漏点耗材成本预估", trigger: "blur"}
        ],
        ddrgCost: [
          {required: true, message: "请输入单个漏点人工开挖成本预估", trigger: "blur"}
        ],
        pipeLength: [
          {required: true, message: "请输入DN75(含)以上管道长度", trigger: "blur"}
        ],
        pipeLengthunit: [
          {required: true, message: "请输入单位供水量管长", trigger: "blur"}
        ],
        pressureYear: [
          {required: true, message: "请输入年平均出厂压力", trigger: "blur"}
        ],
      },
      editingBasicParams: undefined,
      customLabelStyle: {width: '50%', textAlign: 'right'},
    };
  },
  methods: {
    /** 查询基础参数列表 */
    loadBasicParamsData() {
      getCurrentBasicParams().then(response => {
        this.editingBasicParams = response.data;
        this.form = Object.assign({}, response.data)
        // 夜间时间段格式：01:00:00~03:00:00
        const nightOrigin = response.data.night.split('~')
        const from = nightOrigin[0].split(':')
        const to = nightOrigin[1].split(':')
        this.form.night = [new Date(2022, 2, 2, from[0], from[1], from[2]), new Date(2022, 2, 2, to[0], to[1], to[2])]
      });
    },
    getBasicParamsValue(key) {
      return this.editingBasicParams != undefined ? this.editingBasicParams[key] : ''
    },
    handleBasicParamsEdit() {
      this.open = true
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tenantId: null,
        areaID: null,
        changeTime: null,
        waterPrice: null,
        cost: null,
        night: null,
        ddlsl: null,
        ddtlCost: null,
        ddhcCost: null,
        ddrgCost: null,
        pipeLength: null,
        pipeLengthunit: null,
        pressureYear: null,
        warning: null,
        type: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const format = '{h}:{i}:{s}'
          const from = parseTime(this.form.night[0], format)
          const to = parseTime(this.form.night[1], format)
          this.form.night = from + '~' + to
          updateBasicParams(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.loadBasicParamsData();
          });
        }
      });
    },
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getBoxHeight() {
      const h = this.screenHeight - 68
      return {height: h + 'px'}
    }
  },
  mounted() {
    this.loadBasicParamsData()
  }
};
</script>
